<!--侧边栏  -->
<template>
  <div class="sider-bar"  style="width:200px">
      <el-aside width='100%' style="background-color: rgb(238, 241, 246);text-align:left">
        <el-menu @open='isOpen' @close='isClose' >
            <div>首页</div>
            <el-submenu index="1" >
              <template slot="title"><i class="iconfont icon-saishi"></i> 赛事中心</template>
              <el-menu-item-group>
                <template slot="title">绝地求生</template>
                <el-menu-item index="3-1" class="padd-lf-60">赛事列表</el-menu-item>
                <el-menu-item index="3-2" class="padd-lf-60">报名列表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group >
                <template slot="title" >英雄联盟</template>
                <el-menu-item index="3-3" class="padd-lf-60">赛事列表</el-menu-item>
                <el-menu-item index="3-4" class="padd-lf-60">报名列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2" >
              <template slot="title"><i class="iconfont icon-jiangli-"></i> 奖武堂</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>

            <el-submenu index="3" >
              <template slot="title"><i class="iconfont icon-xinwen"></i> 新闻中心</template>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
            </el-submenu>

            <el-submenu index="4" >
              <template slot="title"><i class="iconfont icon-chongzhi"></i> 充值列表</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>

            <el-submenu index="5" >
              <template slot="title"><i class="iconfont icon-chongzhi"></i> 积分商城</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>

            <el-submenu index="6" >
              <template slot="title"><i class="iconfont icon-yonghu"></i> 用户管理</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>
        </el-menu>
      </el-aside>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  components: {},

  computed: {},

  mounted () {},

  methods: {
    isOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    isClose () {
      console.log('isClose')
    }
  }
}

</script>
<style>
 #tableData th{
    text-align: center;
 }
 .padd-lf-60{
    padding-left: 60px !important;
  }
</style>

<style lang='scss' scoped>
.sider-bar{
  float: left;
  border: 1px solid #e2e2e2;
  border-right: none;
   .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
}

</style>
